<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" label-colon=":" :hide-required-mark="true" class="fontsize">
    <FormItem prop="name" >
      <Input v-model="form.name" placeholder="请输入用户名">
      </Input>
    </FormItem>
    <FormItem prop="password" >
      <Input  type="password" v-model="form.password" placeholder="请输入密码" >
      </Input>
    </FormItem>
    <FormItem prop="googlekey" >
      <Input   v-model="form.googlekey" placeholder="请输入验证码"  auto-complete=“new-password”>
      </Input>
    </FormItem>
    <FormItem class="botton_form">
      <button  @click="handleSubmit" type="button">登&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp录</button>
      <!--<Button @click="handleSubmit" type="primary" >登录</Button>-->
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'LoginForm',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    },
    googlekeyRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '谷歌验证不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      form: {
        name: '',
        password: '',
        googlekey:''
      }
    }
  },
  computed: {
    rules () {
      return {
        name: this.nameRules,
        password: this.passwordRules,
        googlekey: this.googlekeyRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            name: this.form.name,
            password: this.form.password,
            googlekey: this.form.googlekey
          })
        }
      })
    }
  }
}
</script>
<style lang="less">
  .fontsize {
    width: 348px;
    margin: 0 auto;
    /deep/ .ivu-input{
      height: 52px;
      background: #5D8AD0;
      border-radius: 3px;
      font-family: PingFang-SC-Regular;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;

    }
    .botton_form{
      margin-top: 52px;
      button{
        width: 348px;
        height: 52px;
        background-image: linear-gradient(90deg, #60C7F9 0%, #235DBB 100%);
        box-shadow: 0 4px 4px 3px rgba(16,27,72,0.58);
        border-radius: 3px;
        font-family: PingFang-SC-Medium;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
      }
    }
  }
</style>
